<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      default-active="$route.path"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="/">
      <img
          style="width: 200px;height: 100%"
          src="/logo/ghost-white.png"
          alt="logo"/>
    </el-menu-item>
    <el-menu-item index="/about">关于
      <el-icon>
        <OfficeBuilding/>
      </el-icon>
    </el-menu-item>
    <el-menu-item index="/knowledgeBase">知识库
      <el-icon>
        <Document/>
      </el-icon>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>工作空间</template>
      <el-menu-item index="/readme">我的
        <el-icon>
          <UserFilled/>
        </el-icon>
      </el-menu-item>
<!--      <el-menu-item index="2-2">设置-->
<!--        <el-icon>-->
<!--          <Setting/>-->
<!--        </el-icon>-->
<!--      </el-menu-item>-->
      <el-menu-item index="/manager">管理
        <el-icon>
          <Setting/>
        </el-icon>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import { useRouter } from 'vue-router'
import {Document, OfficeBuilding, Setting, UserFilled} from "@element-plus/icons-vue";
export default {
  components: {OfficeBuilding, Document, UserFilled, Setting},
  setup() {
    const router = useRouter()
    const activeIndex = router.currentRoute.value.path === '/' ? '/' : '/manager'

    const handleSelect = (key) => {
      router.push(key)
    }

    return {
      activeIndex,
      handleSelect
    }
  }
}
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
